<template>
  <div class="tab-content single-ingot-detail">
    <BasicCard style="margin-bottom: 20px">
      <BasicVxeTable ref="gridRef" v-bind="gridOption"> </BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-bottom: 20px">
      <div class="chart-header">
        <BasicTitle :title="t('custom.实时数据趋势分析')"></BasicTitle>
        <div class="filter">
          <div class="filter-item">
            锭号
            <el-select
              v-model="danDingArr"
              multiple
              collapse-tags
              :placeholder="t('custom.请选择')"
              style="width: 140px"
            >
              <el-option v-for="item in dingHaoList" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div class="filter-item">
            参数
            <el-select v-model="canShuID" :placeholder="t('custom.请选择')" style="width: 140px">
              <el-option
                v-for="item in canShuList"
                :key="item.collectMetaCode"
                :label="item.collectMetaName"
                :value="item.collectMetaCode"
              />
            </el-select>
          </div>
          <div class="filter-item">
            <el-button type="primary" @click="getChartData">查询</el-button>
          </div>
        </div>
      </div>
      <div class="chart-content">
        <SingleIngotDetail_barChart :data="quShiList"></SingleIngotDetail_barChart>
      </div>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import SingleIngotDetail_barChart from './singleIngotDetail_barChart.vue'
  import { valueZhuaneFloat } from '@/utils'
  import {
    getLuoTongDanDingXiangQin,
    getLuoTongZongLianCanShuJi,
    getwuLiaoAndJiTai,
    postLuoTongDanDingXiangQinZhuXingTu,
    getLuoTongCaiJiShuJuList,
    getLuoTongDanDingXiangQinCiLaiFu
  } from '@/api/shengChanJianShi'

  const { t } = useI18n()
  const url = window.location.href
  const jitaiID = ref()
  const jitaiStr = ref()
  const canShuID = ref()
  const quShiList = ref<any>([])
  const danDinData = ref<any>([])
  const danDingArr = ref<any>([])
  const dingHaoList = ref<any>([])
  const jiTaiList = ref<any>([])
  const canShuList = ref<any>([])

  const gridOption = reactive<BasicGridProps>({
    extraConfig: {
      title: t('export.详细报表'),
      isCustom: true,
      isExport: false,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `single-ingot-detail-table`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    // exportConfig: {
    //   filename: '数据表'
    // }
    loading: true,
    maxHeight: '500'
  })

  const handleInit = () => {
    Promise.all([getMachineInfo(), getParamInfo()]).then(() => {
      getDetailList()
    })
  }

  const handleInit_ciLaiFu = () => {
    Promise.all([getMachineInfo(), getParamInfo_ciLaiFu()]).then(() => {
      getDetailList_ciLaiFu()
    })
  }

  // 获取物料和机台列表
  const getMachineInfo = () => {
    return new Promise((resolve) => {
      getwuLiaoAndJiTai('络筒').then((res: any) => {
        const backJson = res
        resolve(res)
        if (backJson.length > 0) {
          jiTaiList.value = []
          for (let item of backJson) {
            jiTaiList.value.push(...item.childNodes)
          }
          jiTaiList.value.sort((a, b) => {
            return a.text - b.text
          })
          if (url.indexOf('msszh') !== -1) {
            let arr = jiTaiList.value.filter((value) => {
              return value.text == '11'
            })
            jitaiID.value = arr[0].id
            jitaiStr.value = '11'
            return
          }
          jitaiID.value = jiTaiList.value[0].id
          jitaiStr.value = jiTaiList.value[0].text
        }
      })
    })
  }

  // 获取参数中文集合
  const getParamInfo = () => {
    return new Promise((resolve) => {
      getLuoTongZongLianCanShuJi({ ltRealTimeDataType: 1 }).then((res: any) => {
        canShuList.value = res
        canShuID.value = canShuList.value[0].collectMetaCode
        let arr: any = []
        res.forEach((val) => {
          if (val.isShowWeb === true) {
            if (val.collectMetaCode == 'S11288') {
              arr.push({
                title: val.collectMetaName,
                slot: 'gongZhuangZhuangTaiSlot',
                field: val.collectMetaCode.toLowerCase(),
                minWidth: 70
              })
            } else {
              arr.push({
                title: val.collectMetaName,
                field: val.collectMetaCode.toLowerCase(),
                minWidth: 70
              })
            }
          }
        })
        gridOption.columns = [
          {
            title: '机台号#锭号',
            field: 'machineSpindleNo',
            minWidth: 110,
            fixed: 'left'
          },
          ...arr
        ]

        resolve(res)
      })
    })
  }

  // 获取参数中文集合-赐来福
  const getParamInfo_ciLaiFu = () => {
    return new Promise((resolve) => {
      getLuoTongCaiJiShuJuList(172, 0).then((res: any) => {
        canShuList.value = []
        resolve(res)
        canShuID.value = 'S11103'
        let arr: any = []
        res.forEach((val) => {
          if (val.isShowWeb === true && val.code != 'P11101' && val.code != 'P41002') {
            if (val.code == 'S11288') {
              arr.push({
                slot: 'gongZhuangZhuangTaiSlot',
                title: val.name,
                field: val.code,
                minWidth: 70
              })
            } else {
              arr.push({
                title: val.name,
                field: val.code,
                minWidth: 70
              })
            }

            canShuList.value.push({
              collectMetaCode: val.code,
              collectMetaName: val.name
            })
          }
        })

        gridOption.columns = [
          {
            title: '机台号#锭号',
            field: 'machineSpindleNo',
            minWidth: 110,
            fixed: 'left'
          },
          ...arr
        ]
      })
    })
  }

  // 获取单锭详情报表
  const getDetailList = () => {
    danDinData.value = []
    danDingArr.value = []
    getLuoTongDanDingXiangQin(jitaiID.value)
      .then((res: any) => {
        gridOption.loading = false
        danDinData.value = res
        danDinData.value.forEach((val) => {
          valueZhuaneFloat(val)
          dingHaoList.value.push(val.spindleNo)
          danDingArr.value.push(val.spindleNo)
          val.machineSpindleNo = jitaiStr.value + '#' + val.spindleNo
        })
        gridOption.data = danDinData.value
        getChartData()
      })
      .catch(() => {
        danDinData.value = []
      })
  }

  // 获取单锭详情报表-赐来福
  const getDetailList_ciLaiFu = () => {
    danDinData.value = []
    danDingArr.value = []
    getLuoTongDanDingXiangQinCiLaiFu(jitaiID.value)
      .then((res: any) => {
        gridOption.loading = false
        danDinData.value = []
        if (res != null && res.machineRealInfo != null && res.machineRealInfo.positions != null) {
          danDinData.value = res.machineRealInfo.positions
          danDinData.value.sort((a, b) => {
            return a.P11101 - b.P11101
          })
          danDinData.value.forEach((val) => {
            dingHaoList.value.push(val.P11101)
            danDingArr.value.push(val.P11101)
            val.machineSpindleNo = res.machineName + '#' + val.P11101
          })
          gridOption.data = danDinData.value
          getChartData()
        }
      })
      .catch(() => {
        danDinData.value = []
      })
  }

  // 获取数据分析列表数据
  const getChartData = () => {
    if (url.indexOf('dszhcj') !== -1 || url.indexOf('localhost') !== -1) {
      // P11101 锭号
      let names: any = []
      let values: any = []
      danDinData.value.forEach((val) => {
        danDingArr.value.forEach((item) => {
          if (val.P11101 == item) {
            names.push(val.P11101)
            values.push(val[canShuID.value])
          }
        })
      })
      quShiList.value = {
        names: names,
        values: values
      }
    } else {
      let data = {
        machineDocumentId: jitaiID.value,
        spindleNoList: danDingArr.value,
        collectMetaCode: canShuID.value
      }
      postLuoTongDanDingXiangQinZhuXingTu(data).then((res: any) => {
        let names: any = []
        let values: any = []
        res.forEach((val) => {
          for (const valKey in val) {
            if (String(val[valKey]).indexOf('.') > -1) {
              val[valKey] = parseFloat(val[valKey]).toFixed(2)
            }
          }
          names.push(val.spindleNo)
          values.push(val.value)
        })
        quShiList.value = {
          names: names,
          values: values
        }
      })
    }
  }

  onMounted(() => {
    if (url.indexOf('dszhcj') !== -1 || url.indexOf('localhost') !== -1) {
      handleInit_ciLaiFu()
    } else {
      handleInit()
    }
  })
</script>
<style scoped lang="scss">
  @import '@/views/shengChanJianShi/luoTongGongXu/winding_style.scss';
  // .chart-header {
  //   margin-top: 8px;
  //   position: relative;

  //   .filter {
  //     display: flex;
  //     position: absolute;
  //     right: 0;
  //     top: 0;

  //     .filter-item {
  //       margin-left: 20px;
  //       font-size: 14px;

  //       & > div {
  //         margin-left: 8px;
  //       }
  //     }
  //   }
  // }
</style>
